<template>
  <div class="login-form-wrapper">
    <div class="login-form-title">{{APP_NAME}}</div>
    <div class="login-form-sub-title"> {{ isRegister ? '注册' : '登录' }}</div>
    <div class="login-form-error-msg">{{errMsg}}</div>
    <a-form
      ref="loginForm"
      :model="userInfo"
      class="login-form"
      layout="vertical"
      @submit="handleSubmit"
    >
      <a-form-item
        field="userAccount"
        :rules="[{ required: true, message: '请输入账号' }]"
        :validate-trigger="['change', 'blur']"
        hide-label
      >
        <a-input
          v-model="userInfo.userAccount"
          placeholder="请输入用户名"
        >
          <template #prefix>
            <icon-user />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item
        field="userPassword"
        :rules="[{ required: true, message: '请输入密码' }]"
        :validate-trigger="['change', 'blur']"
        hide-label
      >
        <a-input-password
          v-model="userInfo.userPassword"
          allow-clear
        >
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>

      </a-form-item>

        <a-form-item
            v-show="isRegister"
            field="checkPassword"
            :rules="[{ required: true, message: '' }]"
            :validate-trigger="['change', 'blur']"
            hide-label
        >
            <a-input-password
                v-model="userInfo.checkPassword"
                allow-clear
            >
                <template #prefix>
                    <icon-lock />
                </template>
            </a-input-password>

        </a-form-item>
        <a-space :size="16" direction="vertical">
            <div class="login-form-password-actions">
                <a-checkbox
                    checked="rememberPassword"
                    :model-value="loginConfig.rememberPassword">
                    记住账号
                </a-checkbox>
<!--                <a-link>忘记密码</a-link>-->
            </div>
            <a-button type="primary" html-type="submit" long :loading="loading">
                {{ isRegister ? '注册' : '登录' }}
            </a-button>
            <a-button type="text" long class="login-form-register-btn" @click="registerBtn">
                {{ !isRegister ? '去注册' : '去登录' }}
            </a-button>
        </a-space>
    </a-form>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from 'vue-router';
  import useStore from "../../../store/index.js";
import {onMounted, ref} from "vue";
  import {APP_NAME} from "../../../config/index.js";
import {userLogin, userRegister} from "../../../apis/UserApi.js";
  import {SUCCESS} from "../../../apis/RequestCode.js";
import {Message} from "@arco-design/web-vue";

  const router = useRouter();
  const route = useRoute();
  const store = useStore();

  const isRegister = ref(false)
  const userInfo = ref({
      userAccount: '',
      userPassword: '',
  })
  const errMsg = ref('')
  const loading = ref(false)
  const loginConfig = ref({
      rememberPassword: true,
  });
  const registerBtn = () => {
      isRegister.value = !isRegister.value
  }

  const handleSubmit = async () => {
      loading.value = true;
      if (isRegister.value) {
          const res = await userRegister(userInfo.value.userAccount, userInfo.value.userPassword, userInfo.value.checkPassword);
          if (res.code === SUCCESS.code) {
              Message.success("注册成功")
              isRegister.value = !isRegister.value
          }else{
              Message.error(res.message)
          }

      }else{
          const res = await userLogin(userInfo.value.userAccount, userInfo.value.userPassword);
          if (res.code === SUCCESS.code) {
              if(loginConfig.value.rememberPassword){
                  localStorage.setItem('userAccount', userInfo.value.userAccount);
              }else{
                  localStorage.removeItem('userAccount');
              }

              store.userinfo = res.data;
              store.userId = res.data.id;
              store.isLogin = true;
              store.userIsLogin = true
              //检查是否有重定向参数
              if (route.query.redirect) {
                  await router.push(route.query.redirect)
              }else{
                  await router.push('/index')
              }

          } else {
              errMsg.value = res.message;
          }
      }

      loading.value = false;
  }
    onMounted(() => {
        //检查是否有记住账号
        if (localStorage.getItem('userAccount')) {
            userInfo.value.userAccount = localStorage.getItem('userAccount');
            loginConfig.value.rememberPassword = true;
        }
    })

</script>

<style scoped>
.login-form-wrapper {
    width: 320px;
}

.login-form-title {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}

.login-form-sub-title {
    color: var(--color-text-3);
    font-size: 16px;
    line-height: 24px;
}

.login-form-error-msg {
    height: 32px;
    color: rgb(var(--red-6));
    line-height: 32px;
}

.login-form-password-actions {
    display: flex;
    justify-content: space-between;
}

.login-form-register-btn {
    color: var(--color-text-3) !important;
}

</style>
